<template>
  <div>
    <van-pull-refresh v-model="isRefreshing" @refresh="onRefresh">
      <van-list
        v-model="isLoading"
        :finished="finished"
        :finished-text="finishedText"
        :error.sync="error"
        :error-text="errorText"
        :immediate-check="immediateCheck"
        :direction="direction"
        :offset="offset"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.title" :title="item.title" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import {Cell, List,PullRefresh } from 'vant';
// 列表组件 目前未测试
export default {
  name: 'commonList',
  components:{
    'van-pull-refresh':PullRefresh,
    'van-cell':Cell,
    'van-list':List,
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    // 是否已加载完成，加载完成后不再触发load事件
    finished: {
      type: Boolean,
      default: false
    },
    // 是否处于加载状态，加载过程中不触发load事件
    loading: {
      type: Boolean,
      default: false
    },
    refreshing: {
      type: Boolean,
      default: false
    },
    error: {
      type: Boolean,
      default: false
    },
    // 是否在初始化的时候加载 load 事件
    immediateCheck: {
      type: Boolean,
      default: true
    },
    // 加载过程中的提示文案
    loadingText: {
      type: String,
      default: '加载中...'
    },
    // 加载完成后的提示文案
    finishedText: {
      type: String,
      default: '没有更多了'
    },
    // 加载失败后的提示文案
    errorText: {
      type: String,
      default: '请求失败，点击重新加载'
    },
    // 滚动触发加载的方向 ------> 默认朝下，可选值为 up 朝上滚动
    direction: {
      type: String,
      default: 'down'
    },
    // 滚动条与底部距离小于 offset 时触发load事件
    offset: {
      type: Number,
      default: 300
    }
  },
  computed: {
    isLoading: {
      get() {
        return this.loading
      },
      set(val) {
        this.$emit('update:loading', val)
      }
    },
    isRefreshing: {
      get() {
        return this.refreshing
      },
      set(val) {
        this.$emit('update:refreshing', val)
      }
    }
  },
  data() {
    return {
      // list: [],
      // loading: false
      // finished: false
    }
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      // setTimeout(() => {
      //   for (let i = 0; i < 10; i++) {
      //     this.list.push(this.list.length + 1)
      //   }
      //   // 加载状态结束
      //   this.loading = false
      //   // 数据全部加载完成
      //   if (this.list.length >= 40) {
      //     this.finished = true
      //   }
      // }, 1000)
      this.$emit('OnLoad')
    },
    onRefresh() {
      // 清空列表数据
      // this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      // this.loading = true
      // this.onLoad()
      this.$emit('OnRefresh')
    }
  }
}
</script>

<style lang="" scoped></style>
